﻿<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/v2/console/common/taglibs.jsp"%>
<!DOCTYPE html>
<html>
<head>
	<title>文章详情</title>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="${path}/party/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="${path}/party/css/pagination.css">
  <link rel="stylesheet" type="text/css" href="${path}/party/css/main.css">
</head>
<body>
<div id="VueId" v-cloak>


  <!-- 内容部分 -->
  <div class="dj-body">
    <div class="center-div">
      <div class="detail-div">
        <div class="det-left">
          <h4 class="det-left-title">{{article.title}}</h4>
          <label class="det-left-time">{{pubTime}}&nbsp;&nbsp;&nbsp;来源：{{article.author}}</label>
          <p class="det-left-title-p">{{article.subtitle}}</p>
          <div class="det-left-textar" >
            <p v-html="article.content">{{article.content}}</p>
          </div>
        </div>
        <div class="det-right">
          <div class="det-right-top">
            <img src="${path}/party/images/img1.png" class="image1" />
            <div class="fragment-div">
              <i class="quotationMark1-icon"></i>
              <p>
                	中共中央总书记习近平在主持学习时强调，法律是准绳，中共中央总书记习近平在主持学习时强调，法律是准绳，中共中央总书记习近平在主持学习时强调，法律是准绳，中共中央总书记习近平在主持学习时强调，法律是准绳，
                <br>
                <span>———习近平</span>
              </p>
              <i class="quotationMark2-icon"></i>
            </div>
          </div>
          <div class="det-right-bottom">
            <h4 class="news-title">消息</h4>
            <div class="contactUs-div">
              <label>联系我们的投稿</label>
              <p>如有查询，请致电010-12345678</p>
              <a href="javascript:;" class="btn btn-sm">给我们发电子邮件</a>
            </div>
            <div class="activity-div">
              <h4>即将举行的活动</h4>
              <label>无事件</label>
              <a href="javascript:;" class="btn btn-sm">查看全部</a>
            </div>
          </div>
        </div>
      </div>



      <div class="moreInfo-div">
        <h4>了解更多信息</h4>
        <ul>
          <li>
            <img src="${path}/party/images/articlesList/icon_massage.png" />
            <div class="ri-div">
              <p>现在给我们发电子邮件，<br>告诉我们你的疑问</p>
              <a href="javascript:;">发电子邮件询问</a>
            </div>
          </li>
          <li>
            <img src="${path}/party/images/articlesList/icon_phone.png" />
            <div class="ri-div">
              <p>和我们的顾问谈谈你的<br>选择</p>
              <a href="javascript:;" class="red">要求回电话</a>
            </div>
          </li>
          <li>
            <img src="${path}/party/images/articlesList/icon_course.png" />
            <div class="ri-div">
              <p>了解更改关于我们和我<br>们的课程</p>
              <a href="javascript:;">查看课程</a>
            </div>
          </li>
        </ul>
      </div>

    </div>
  </div>
</div>
<!-- javascritp flie -->
<script type="text/javascript" src="${path}/party/js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="${path}/party/js/jquery.pagination.js"></script>
<script type="text/javascript" src="${path}/party/js/rem(750).js"></script>
<script type="text/javascript" src="${path}/party/js/vue2.js"></script>
<script type="text/javascript" src="${path}/party/plugin/nav-moveline/js/jquery.easing.js"></script>
<script type="text/javascript" src="${path}/party/plugin/nav-moveline/js/moveline.js"></script>
<script type="text/javascript" src="${path}/party/plugin/nav-moveline/js/toast.js"></script>
<script type="text/javascript">
    var listData = {
      twoNavActive: 0,
      threeNav:[],
      threeNavActive: 0,
      nav: [
        { id:1, navName:'德法治国',
         twoNav:[
           { id:1, twoNavName:'德法治国1'},
           { id:2, twoNavName:'德法治国2'},
           { id:3, twoNavName:'德法治国3'}
         ] 
        },
        { id:2, navName:'课程研究',
         twoNav:[
           { id:1, twoNavName:'主题论坛'},
           { id:2, twoNavName:'互动社区'},
           { id:3, twoNavName:'课程招贤'}
         ] 
        },
        { id:3, navName:'专家观点',
         twoNav:[
           { id:1, twoNavName:'专家观点1'},
           { id:2, twoNavName:'专家观点2'},
           { id:3, twoNavName:'专家观点3'}
         ] 
        },
        { id:4, navName:'示范基地',
         twoNav:[
           { id:1, twoNavName:'示范基地1'},
           { id:2, twoNavName:'示范基地2'},
           { id:3, twoNavName:'示范基地3'}
         ] 
        }
      ]
    };

    var vm = new Vue({
        el: '#VueId',
        data: {
        	listData:listData,
        	articleId:"",
        	article:{},
        	pubTime:''
        },
        created:function(){
        	this.articleId = ${articleId};
        	this.getArticleDetail(this.articleId);
        },
        methods: {
          
          getArticleDetail:function(articleId) {
        	  let _that = this;
        	  $.ajax({
    				type : "post",
    				url : "${path}/web/artcle/"+articleId+".html",
    				dataType : "json",
    				data:{},
    				async : false,
    				success : function(data) {
    					if(data.ajax_status == "ajax_status_success"){
    						_that.article = data.map;
    						_that.pubTime = _that.formatDateTime(data.map.pubTime);
    					}
    				},
    				error : function(XMLHttpRequest, textStatus, errorThrown){
    		          alert("出错了！");
    		       }
    			});
        	  
        	  
          },
          formatDateTime:function(inputTime) {  
        	    var date = new Date(inputTime);
        	    var y = date.getFullYear();  
        	    var m = date.getMonth() + 1;  
        	    m = m < 10 ? ('0' + m) : m;  
        	    var d = date.getDate();  
        	    d = d < 10 ? ('0' + d) : d;  
        	    var h = date.getHours();
        	    h = h < 10 ? ('0' + h) : h;
        	    var minute = date.getMinutes();
        	    var second = date.getSeconds();
        	    minute = minute < 10 ? ('0' + minute) : minute;  
        	    second = second < 10 ? ('0' + second) : second; 
        	    return y + '-' + m + '-' + d+' '+h+':'+minute+':'+second;  
        	}
        }
    });

    vm.$nextTick(function(){
      $('.nav1-ul').moveline({customTop:true,top:0});//一级导航动画初始化 
      vm.threeNav = vm.listData.nav[0].twoNav;//给三级导航 添加默认的数据

      //分页初始化
      $('#pagination').pagination({
        prevContent: "上一页",
        nextContent: "下一页",
        prevCls:'prev',
        nextCls:'next',
        totalData:100,
        showData:5,
        coping:true
      });
    });
</script>
</body>
</html>
